<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>


<link rel="stylesheet" href="../../static/css/side.css">


<div class="col-md-3 col-12">
    <div class="user-panel">
        {% if user %}
            <div class="tip1">个人信息-- <span>{{ user.username }}</span></div>
            <div class="tip-back"></div>
            <div class="tip1-photo"><img src="{{ url_for('static',filename = 'photo/'+ user.photo) }}"
                                         class="img-fluid rounded-circle" alt=""/>
            </div>
            <div style="width: 100%;height: 40px;margin-top: 50px;font-size:16px;text-align: center;cursor: pointer">
                <a>{{ user.username }}</a></div>
            <div style="width: 100%;height: 40px;font-size:14px;text-align: center;color: #888A8F">
                <span>三千大道，不敌她一人</span></div>
            <div class="log-reg">
                <div>
                    <button type="submit" class="btn btn-success" id="sub-article" style="border-radius: 13px;">
                        发表文章
                    </button>

                </div>
                <div>
                    <button type="submit" class="btn btn-primary reg-user" id="user-site" style="border-radius: 13px;">
                        用户中心
                    </button>
                </div>
            </div>
            <hr>

        {% else %}

            <div class="tip1">个人信息-- <span>无</span></div>

            <div class="tip-back"></div>
            <div class="tip1-photo"><img src="../../static/image/avatar.jpg"
                                         class="img-fluid rounded-circle" alt=""/>
            </div>

            <div class="log-reg" style="margin-top: 90px;">
                <div>
                    <button type="submit" class="btn btn-primary" id="loginButton">登录</button>

                </div>
                <div>
                    <button type="submit" class="btn btn-warning reg-user" id="regButton">注册</button>
                </div>
            </div>
        {% endif %}

    </div>

    <div class="side">

        <div class="article-recommend">
            <div class="col-12 tip">最新文章</div>
            <ul id="new" style="margin-top: 15px;">

                <li v-for="(article, index) in content">

                    {#                    {% if index==1 %}#}
                    {#                    <div style="margin-top: 5px;margin-left: 5px;width: 260px;height: 120px;border: 1px solid red">#}
                    {##}
                    {#                    </div>#}
                    {#                    {% endif %}#}

                    <div v-bind:style="{ width: '90px', height: '50px', background: 'url(/static/uploads/' + article['cover'] +  ') center/cover', borderRadius: '15px', marginTop: '10px', 'display': 'inline-block' } "></div>
                    <div style="display: inline-block;margin-left: 8px;">
                        <div>
                            <a style="color: #E5EEF7;margin-bottom: 50px" v-bind:href="'/detail/' +  article['new_id']">${
                                article['new_title'] }</a>
                        </div>
                        <div style="color: #B4B6BB;">
                            <span style="font-size: 10px;" v-bind:style="">${ article['times'] }</span>
                            <span style="font-size: 10px;margin-left: 5px;" v-bind:style="">${ article['readcount'] }人已阅读</span>
                        </div>

                    </div>

                </li>
            </ul>

        </div>
        <div class="article-recommend">
            <div class="col-12 tip">推荐文章</div>
            <ul id="recommend" style="margin-top: 15px;">
                <li v-for="(article, index) in content3">
                    <div v-bind:style="{ width: '90px', height: '50px', background: 'url(/static/uploads/' + article['cover'] +  ') center/cover', borderRadius: '15px', marginTop: '10px', 'display': 'inline-block' } ">

                    </div>
                    <div style="display: inline-block;margin-left: 8px;">
                        <div>
                            <a style="color: #E5EEF7;margin-bottom: 50px" v-bind:href="'/detail/' +  article['new_id']">${
                                article['new_title'] }</a>
                        </div>
                        <div style="color: #B4B6BB;">
                            <span style="font-size: 10px;" v-bind:style="">${ article['times'] }</span>
                            <span style="font-size: 10px;margin-left: 5px;" v-bind:style="">${ article['readcount'] }人已阅读</span>
                        </div>

                    </div>

                </li>
            </ul>
        </div>

        <div class="article-recommend">
            <div class="col-12 tip">更多阅读</div>
            <ul id="most" style="margin-top: 15px;">

                <li v-for="(article, index) in content2">


                    <div v-bind:style="{ width: '90px', height: '50px', background: 'url(/static/uploads/' + article['cover'] +  ') center/cover', borderRadius: '15px', marginTop: '10px', 'display': 'inline-block' } "></div>
                    <div style="display: inline-block;margin-left: 8px;">
                        <div>
                            <a style="color: #E5EEF7;margin-bottom: 50px" v-bind:href="'/detail/' +  article['new_id']">${
                                article['new_title'] }</a>
                        </div>
                        <div style="color: #B4B6BB;">
                            <span style="font-size: 10px;" v-bind:style="">${ article['times'] }</span>
                            <span style="font-size: 10px;margin-left: 5px;" v-bind:style="">${ article['readcount'] }人已阅读</span>
                        </div>

                    </div>

                </li>
            </ul>
        </div>

    </div>
</div>


<script src="../../static/js/article/side.js"></script>

